<template>

  <!-- 新增/修改服务 -->
  <div class="create-service">
    <el-dialog
      title="新增/修改服务"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="800px"
    >
      <el-form ref="form" :model="form" :rules="formRules" label-width="150px" :disabled="display">
        <el-form-item label="服务名称:" prop="serviceName">
          <el-input v-model="form.serviceName" clearable :maxlength="50" placeholder="请输入服务名称" />
        </el-form-item>
        <el-form-item label="系统名称:" prop="systemId">
          <el-select v-model="form.systemId" clearable placeholder="请选择系统名称" @change="systemIdChange">
            <el-option
              v-for="(item, index) in systemIdList"
              :key="index"
              :label="item.systemCode + ' / ' + item.systemName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="接口方式:" prop="interfaceType">
          <el-select v-model="form.interfaceType" clearable placeholder="请选择接口方式" @change="interfaceTypeChange">
            <el-option
              v-for="(item, index) in dictOptions.interface_type"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="接口地址:" prop="interfaceAddress">
          <el-input v-model="form.interfaceAddress" type="textarea" :rows="3" :maxlength="150" clearable placeholder="请输入接口地址" />
        </el-form-item>
        <el-form-item label="接口协议:" prop="interfaceProtocol">
          <el-select v-model="form.interfaceProtocol" clearable placeholder="请选择接口协议">
            <el-option
              v-for="(item, index) in interface_protocol"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="返回值状态码标识:" prop="responseCode">
          <el-input v-model="form.responseCode" clearable :maxlength="50" placeholder="请输入返回值状态码标识" />
        </el-form-item>
        <el-form-item label="返回值描述标识:" prop="responseMsg">
          <el-input v-model="form.responseMsg" clearable :maxlength="50" placeholder="请输入返回值描述标识" />
        </el-form-item>
        <el-form-item label="返回值数据标识:" prop="responseData">
          <el-input v-model="form.responseData" clearable :maxlength="50" placeholder="请输入返回值数据标识" />
        </el-form-item>
        <el-form-item label="返回值类型:" prop="responseType">
          <el-select v-model="form.responseType" clearable placeholder="请选择返回值类型">
            <el-option
              v-for="(item, index) in dictOptions.responseType"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="成功状态码:" prop="responseSuccessCode">
          <el-input v-model="form.responseSuccessCode" clearable :maxlength="50" placeholder="请输入成功状态码" />
        </el-form-item>
        <el-form-item v-if="form.interfaceProtocol === '1' && form.interfaceType === '3'" label="wsdl命名空间:" prop="wsdlNamespace">
          <el-input v-model="form.wsdlNamespace" clearable :maxlength="50" placeholder="请输入wsdl命名空间" />
        </el-form-item>
        <el-form-item v-if="form.interfaceProtocol === '1' && form.interfaceType === '3'" label="wsdl调用方法:" prop="wsdlMethod">
          <el-input v-model="form.wsdlMethod" clearable :maxlength="50" placeholder="请输入wsdl调用方法" />
        </el-form-item>
        <el-form-item label="启用状态:" prop="sts" required>
          <el-switch
            v-model="form.sts"
            active-text="已启用"
            active-value="1"
            inactive-text="已禁用"
            inactive-value="2"
          />
        </el-form-item>
        <el-form-item label="状态:">
          <el-button size="small" :disabled="pingIng" :loading="pingIng" @click="pingBtn"> 连通测试 </el-button>
        </el-form-item>
        <!-- <el-form-item label="前置服务:" prop="interfaceBefore" required>
          <el-switch
            v-model="form.interfaceBefore"
            active-text="开"
            active-value="1"
            inactive-text="关"
            inactive-value="2"
          />
        </el-form-item>
        <el-form-item v-if="form.interfaceBefore === '1'" label="前置服务名称:" prop="interfaceBeforeId">
          <el-select v-model="form.interfaceBeforeId" clearable placeholder="请选择服务名称">
            <el-option
              v-for="(item, index) in interfaceBeforeIdList"
              :key="index"
              :label="item.serviceName"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="加解密方式:" prop="encryptDecryptId">
          <el-select v-model="form.encryptDecryptId" clearable placeholder="请选择加解密方式">
            <el-option
              v-for="(item, index) in encryptDecryptIdList"
              :key="index"
              :label="item.encryptDecryptName + '-' + getDictText('encryptMethod', item.method)"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="!display" type="primary" :disabled="!canClick" :loading="!canClick" @click="interfaceServiceConfirm('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addApi, getSystemListApi,
  pingApi } from '@/api/serviceManage/requestPartyServiceManage'
import dictMixin from '@/utils/mixins/dict'
import { encDecPage } from '@/api/encryptionDecryptionConfigurations'
export default {

  mixins: [
    dictMixin(['interface_type', 'interface_protocol', 'encryptMethod', 'responseType@Local'])
  ],

  props: {
    manageType: {
      type: Number,
      default: 1
    }
  },

  data () {
    return {
      pingIng: false,
      canClick: true,
      dialogVisible: false,
      display: false,
      form: {
        serviceName: '',
        systemId: '',
        interfaceType: '',
        interfaceAddress: '',
        interfaceProtocol: '',
        sts: 2,
        interfaceBefore: 2,
        interfaceBeforeId: '',
        encryptDecryptId: '',
        // 返回值状态码标识
        responseCode: '',
        // 返回值描述标识
        responseMsg: '',
        // 返回值数据标识
        responseData: '',
        // 返回值类型
        responseType: '',
        // 成功状态码
        responseSuccessCode: '',
        // wsdl命名空间
        wsdlNamespace: '',
        // wsdl调用方法
        wsdlMethod: ''
      },
      formRules: {
        serviceName: { required: true, message: '请输入服务名称', trigger: 'blur' },
        systemId: { required: true, message: '请选择系统名称', trigger: 'change' },
        interfaceType: { required: true, message: '请选择接口方式', trigger: 'change' },
        interfaceAddress: { required: true, message: '请输入接口地址', trigger: 'blur' },
        interfaceProtocol: { required: true, message: '请选择接口协议', trigger: 'change' },
        interfaceBeforeId: { required: true, message: '请选择服务名称', trigger: 'change' },
        responseCode: { required: true, message: '请输入返回值状态码标识', trigger: 'blur' },
        responseMsg: { required: true, message: '请输入返回值描述标识', trigger: 'blur' },
        responseData: { required: true, message: '请输入返回值数据标识', trigger: 'blur' },
        responseType: { required: true, message: '请选择返回值类型', trigger: 'change' },
        responseSuccessCode: { required: true, message: '请选择成功状态码', trigger: 'blur' },
        wsdlNamespace: { required: true, message: '请输入wsdl命名空间', trigger: 'blur' },
        wsdlMethod: { required: true, message: '请输入wsdl调用方法', trigger: 'blur' }
      },
      // 关联系统列表
      systemIdList: [],
      // 服务名称列表
      interfaceBeforeIdList: [],
      // 加解密列表
      encryptDecryptIdList: []
    }
  },

  computed: {
    interface_protocol () {
      return this.dictOptions.interface_protocol.map((item, index) => {
        return {
          ...item,
          disabled: this.form.interfaceType === '3' ? index !== 0 : index === 0
        }
      })
    }
  },

  methods: {
    // 连通测试按钮
    pingBtn () {
      if (!this.form.interfaceAddress) {
        return this.$refs.form.validateField('interfaceAddress')
      }
      this.pingIng = true
      pingApi({
        interfaceAddress: this.form.interfaceAddress
      }).then(({ code, data }) => {
        if (code === '00000') {
          if (data) {
            this.$message.success('接口连通测试成功')
          } else {
            this.$message.error('接口连通测试失败')
          }
        }
      }).finally(() => {
        this.pingIng = false
      })
    },

    // 确定按钮
    interfaceServiceConfirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.canClick = false
          addApi({
            ...this.form
          }, this.form.id)
            .then(({ code, data }) => {
              if (code === '00000') {
                // this.$message.success('新增成功')
                this.dialogVisible = false
                this.$emit('interfaceServiceRefresh')
              }
            }).finally(() => {
              this.canClick = true
            })
        }
      })
    },

    // 获取各种初始数据
    getInitData (row, isDetail) {
      getSystemListApi()
        .then(({ code, data }) => {
          if (code === '00000') {
            this.systemIdList = data
          }
        })
      if (isDetail) {
        this.display = isDetail
      } else {
        this.display = false
      }
      if (row) {
        const fieldList = ['id', 'serviceName', 'systemId', 'interfaceType', 'interfaceAddress',
          'interfaceProtocol', 'sts', 'interfaceBefore', 'interfaceBeforeId', 'manageType',
          'encryptDecryptId', 'upStatus', 'responseCode', 'responseMsg', 'responseData',
          'responseType', 'responseSuccessCode', 'wsdlNamespace', 'wsdlMethod']

        fieldList.forEach(element => {
          this.form[element] = row[element]
        })
        this.systemIdChange('init')
      } else {
        this.form = {
          serviceName: '',
          systemId: '',
          interfaceType: '',
          interfaceAddress: '',
          interfaceProtocol: '',
          sts: 2,
          interfaceBefore: 2,
          interfaceBeforeId: '',
          manageType: this.manageType,
          encryptDecryptId: '',
          upStatus: 0,
          responseCode: '',
          responseMsg: '',
          responseData: '',
          responseType: '',
          responseSuccessCode: '',
          wsdlNamespace: '',
          wsdlMethod: ''
        }
        this.$refs.form.resetFields()
      }
    },

    // 系统名称change
    systemIdChange (val) {
      // getInterfaceBeforeListApi({
      //   systemId: this.form.systemId,
      //   manageType: this.manageType
      // })
      //   .then(({ code, data }) => {
      //     if (code === '00000') {
      //       this.interfaceBeforeIdList = data
      //     }
      //   })
      if (val !== 'init') {
        this.form.encryptDecryptId = ''
      }
      // 加解密方式
      encDecPage({
        systemId: this.form.systemId,
        pageNo: 1,
        pageSize: -1
      }).then(({ code, data }) => {
        if (code === '00000') {
          this.encryptDecryptIdList = data.rows
        }
      })
    },

    // 接口方式修改
    interfaceTypeChange () {
      this.form.interfaceProtocol = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.create-service {
  ::v-deep .el-dialog__body {
    padding: 0 20px;
    height: 500px;
    overflow-y: auto;
  }
}

</style>
